<template>
    <div>
        <a @click="activeCom='MusicCom1'" href="#">流行音乐</a>
        <a @click="activeCom='MusicCom2'" href="#">古典音乐</a>
        <a @click="activeCom='MusicCom3'" href="#">民族音乐</a>
        <component :is="activeCom"></component>
    </div>
</template>

<script>
import MusicCom1 from './MusicCom1.vue';
import MusicCom2 from './MusicCom2.vue';
import MusicCom3 from './MusicCom3.vue';
    export default{
        data(){
            return{
                activeCom:"MusicCom1"
            }
        },
        components:{
            MusicCom1,
            MusicCom2,
            MusicCom3
        }
    }
</script>

<style>
</style>